SASS

• 不寫大括號 { } 、不寫分號 ;
• 縮排語法。縮進取代大括號 { }
  (所以縮排相當重要、不可空錯)
• 不兼容CSS
• 文件擴展名為“.sass”

SCSS

• 需寫大括號 { }、需寫分號 ;
• 塊語法
• 兼容CSS
• 文件擴展名為“.scss”

簡表

\ | SASS | SCSS
------------- | -------------
語法 | 縮排語法 | 塊語法
寫法 | 不寫大括號 { } ,不寫分號 ; | 需寫大括號 { } ,需寫分號 ;
兼容性 | 不兼容CSS | 兼容CSS
文件擴展名 | “.sass” | “.scss”

以下為SASS、SCSS、CSS語法範例:

//SASS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

不寫大括號 { } ,不寫分號 ;

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

需寫大括號 { } ,需寫分號 ;

//CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

CSS編譯結果